import Vue from 'vue'
import VueRouter from 'vue-router'

// import Home from '../views/home/Home.vue'
// import Login from '../views/Login'
// import Welcome from '../views/home/Welcome'
// import Users from '../views/home/user/Users'
// import Rights from '../views/home/power/Rights'
// import Roles from '../views/home/power/Roles'
// import Cate from '../views/home/goods/Cate'
// import Params from '../views/home/goods/Params'
// import Goods from '../views/home/goods/Goods'
// import Add from '../views/home/goods/Add'
// import Order from '../views/home/order/Order'
// import Report from '../views/home/report/Report'

// 路由懒加载, 配合@babel/plugin-syntax-dynamic-import使用
// /* webpackChunkName: "login_home_welcome" */ 路由分组的名称
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Login')

const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../views/Welcome.vue')

const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../views/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../views/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../views/power/Roles.vue')

const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../views/goods/Cate.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../views/goods/Params.vue')

const Goods = () => import(/* webpackChunkName: "GoodsList_Add" */ '../views/goods/Goods.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../views/goods/Add.vue')

const Order = () => import(/* webpackChunkName: "Order_Report" */ '../views/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../views/report/Report.vue')

Vue.use(VueRouter)

const routes = [
  { // 路由重定向
    path: '/',
    redirect: '/login'
  },
  { // 路由组件
    path: '/login',
    name: 'Login',
    component: Login
  },
  { // 首页组件
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      { // 路由重定向
        path: '/home',
        redirect: '/welcome'
      },
      {
        path: '/welcome',
        name: 'Welcome',
        component: Welcome
      },
      {
        path: '/users',
        name: 'Users',
        component: Users
      },
      {
        path: '/rights',
        name: 'Rights',
        component: Rights
      },
      {
        path: '/roles',
        name: 'Roles',
        component: Roles
      },
      {
        path: '/categories',
        name: 'Cate',
        component: Cate
      },
      {
        path: '/params',
        name: 'Params',
        component: Params
      },
      {
        path: '/goods',
        name: 'Goods',
        component: Goods
      },
      {
        path: '/goods/add',
        name: 'Add',
        component: Add
      },
      {
        path: '/orders',
        name: 'Order',
        component: Order
      },
      {
        path: '/reports',
        name: 'Report',
        component: Report
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 挂载路由导航守卫来控制访问的权限
// 如果用户没有登陆, 但是直接通过url访问特定页面, 需要重新导航到登陆页面
// 为路由对象, 添加beforeEach导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径    from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行    next() 放行    next('/login') 强制跳转
  // 如果用户访问的是登录页, 直接放行
  if (to.path === '/login') return next()
  // 从sessionStorage中获取保存的token值
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有token, 强制跳转到登录页
  if (!tokenStr) return next('/login')
  next()
})

export default router
